<template>
  <view class="container">
    <intake-nav-bar title="管理设备" dark :fixed="true" />
    <scroll-view class="content" scroll-y="true" @scrolltolower="loadMore" lower-threshold="50">
      <view class="list" v-for="(item, index) in list" @click="openDes(item)">
        <view>{{item.nickname}}</view>
        <view class="blue">{{item.water_title}} - {{item.water_id}}<uni-icons type="right" size="18" color="#aaa" style="margin:0 20rpx" /></view>
      </view>
      <view class="uni-load-more_text ac h50" v-if="noMore">没有更多数据了</view>
      <view class="empty" v-if="list.length === 0">
          <emptyPage title="暂无记录哦"></emptyPage>
      </view>
    </scroll-view>
  </view>

</template>
<script>
import {getDeviceLists} from '@/api/user.js';
import emptyPage from '@/components/emptyPage.vue';
export default {
  components: {
    emptyPage
  },
  data() {
    return {
      list: [], // 列表数据
      page: 1, // 当前页码
      pageSize: 10, // 每页数据量
      loading: false, // 是否正在加载
      noMore: false, // 是否没有更多数据
    }
  },
  onLoad() {
    this.queryList()
  },
  methods: {
    openDes(e) {
      uni.navigateTo({
        url: '/pages/users_purchasing/user_spread_device/des?quilt_uid='+e.quilt_uid+'&water_id='+e.water_id
      });
    },
    async queryList() {
      if (this.loading || this.noMore) return;
      this.loading = true;
      const newData = await getDeviceLists(
        {
          page: this.page,
          pageSize: this.pageSize,
        })
      if (newData.data.length > 0) {
        this.list = this.list.concat(newData.data);
        this.page++;
      } else {
        this.noMore = true;
      }

      this.loading = false;
    },
    // 加载更多
    loadMore() {
      this.queryList();
    },
  }
}

</script>
<style lang="scss">
.container {
  width: 100%;
  height: 100vh;
  // text-align: center;
  padding: 20px;
  background: linear-gradient(to bottom, #E3EAFB 0%, transparent 100%);

  .content {
    width: 100%;
    background-color: #fff;
    padding: 20rpx 10rpx 20rpx 40rpx;
    border-radius: 15rpx;
    height: calc(100% - 188rpx);
  }

  .list {
    width: 100%;
    line-height: 108rpx;
    font-size: 28rpx;
    font-weight: 550;
    color: #212B3D;
    display: flex;
    justify-content: space-between;

    // border-bottom: #f2f2f2 1px solid;
    .blue {
      color: #3662EC;
    }
  }
}
</style>